@import "_config.scss";
@import "_mixin.scss";

$margin-size: 0, 2, 4, 5, 8, 10, 12, 15, 16, 20, 24, 25, 26, 30, 35, 40, 50, 60, 70, 80, 90, 120;

@for $i from 1 through length($margin-size) {
  .ML#{nth($margin-size, $i)} {
    margin-left: #{nth($margin-size, $i)}px!important;
  }

  .MR#{nth($margin-size, $i)} {
    margin-right: #{nth($margin-size, $i)}px!important;
  }

  .MT#{nth($margin-size, $i)} {
    margin-top: #{nth($margin-size, $i)}px;
  }

  .MB#{nth($margin-size, $i)} {
    margin-bottom: #{nth($margin-size, $i)}px;
  }

  .PL#{nth($margin-size, $i)} {
    padding-left: #{nth($margin-size, $i)}px;
  }

  .PR#{nth($margin-size, $i)} {
    padding-right: #{nth($margin-size, $i)}px;
  }

  .PT#{nth($margin-size, $i)} {
    padding-top: #{nth($margin-size, $i)}px;
  }

  .PB#{nth($margin-size, $i)} {
    padding-bottom: #{nth($margin-size, $i)}px;
  }

  .MLF#{nth($margin-size, $i)} {
    margin-left: -#{nth($margin-size, $i)}px;
  }

  .MRF#{nth($margin-size, $i)} {
    margin-right: -#{nth($margin-size, $i)}px;
  }

  .MTF#{nth($margin-size, $i)} {
    margin-top: -#{nth($margin-size, $i)}px;
  }

  .MBF#{nth($margin-size, $i)} {
    margin-bottom: -#{nth($margin-size, $i)}px;
  }

  .PLF#{nth($margin-size, $i)} {
    padding-left: -#{nth($margin-size, $i)}px;
  }

  .PRF#{nth($margin-size, $i)} {
    padding-right: -#{nth($margin-size, $i)}px;
  }

  .PTF#{nth($margin-size, $i)} {
    padding-top: -#{nth($margin-size, $i)}px;
  }

  .PBF#{nth($margin-size, $i)} {
    padding-bottom: -#{nth($margin-size, $i)}px;
  }
}

$font-size: 10, 12, 13, 14, 15, 16, 18, 20, 22, 24, 30;

@for $i from 1 through length($font-size) {
  .fz#{nth($font-size, $i)} {
    font-size: #{nth($font-size, $i)}px;
  }

  .fzb#{nth($font-size, $i)} {
    font-size: #{nth($font-size, $i)}px;
    font-weight: bold;
  }
}

//文字
$font-color: (
  "white": $white,
  "blue": $blue,
  "red": $red,
  "green": $green,
  "orange": $orange,
  "black": $black,
  "gray": $fontGray,
  "gray-light": $fontGrayLight,
);

@each $name, $color in $font-color {
  .mark-#{$name} {
    color: $color;
    font-weight: bold;

    &:hover {
      color: $color;
    }
  }

  .text-#{$name} {
    color: $color;

    &:hover {
      color: $color;
    }
  }

  .bg-text-#{$name} {
    color: $white;
    background: $color;
    padding: 0 8px;
    font-size: 12px;
    @include l-h(20px);
    min-width: 40px;
    display: inline-block;
    text-align: center;
    border-radius: 20px;

    &:hover {
      color: $white;
    }
  }
}
p{
  margin: 0;
}
.hand{
  cursor: pointer;
}